<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../jq/js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <button class="pick-file">选择</button>

    <script type="text/javascript">
        let fileHandle;
        const options = {
            //开启多文件选择            
            multiple: true,
        }

        /* document.querySelector(".pick-file").onclick = async () => {
             //await 等待返回结果 同步的 [fileHandle]将结果返回为一个对象
             [fileHandle] = await window.showOpenFilePicker();
             console.log([fileHandle])
             const file = await fileHandle.getFile();
             const content = await file.text();
 
             return content;
         };  */

        /*
        //多文件
       document.querySelector(".pick-file").onclick = async () => {
           fileHandles = await window.showOpenFilePicker(options);
           //await Promise.all返回多个数据
           const allContent = await Promise.all(
               fileHandles.map(async (fileHandle) => {
                   const file = await fileHandle.getFile();
                   const content = await file.text();
                   return content;
               })
           );
           console.log(allContent);
       }; */
        /*
        //改写文件内容
        document.querySelector(".pick-file").onclick = async () => {
            [fileHandle] = await window.showOpenFilePicker();

            const file = await fileHandle.getFile();
            const writable = await fileHandle.createWritable();

            await writable.write("This is a new line");
            await writable.close();
        };
        */



        
    </script>
</body>

</html>